<!--
  * 退款详情
-->
<template>
  <a-modal
    :width="1000"
    :open="openForm"
    @cancel="onReplyModalClose"
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="onReplySubmit"
    :getContainer="getContainer"
    :footer="false"
  >
    <template #title>
      <div class="flex justify-between">
        <div>退款详情</div>
      </div>
    </template>
    <a-descriptions :column="2">
      <a-descriptions-item v-for="item in detailConfig" :key="item.dataIndex" :label="item.label" v-bind="item.options">{{
        item?.customRender ? item.customRender(replyForm) : replyForm[item.dataIndex]
      }}</a-descriptions-item>
    </a-descriptions>
    <group-title class="py-2">分账回退详情</group-title>
    <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="id" bordered :loading="tableLoading" :pagination="false" />
  </a-modal>
</template>
<script setup>
  import { reactive, ref, nextTick, computed, watch, getCurrentInstance, h } from 'vue'
  import { message, Modal } from 'ant-design-vue'
  import { wechatDetail } from '/@/api/business/b-merchant/complaintManage'
  import { SmartLoading } from '/@/components/framework/smart-loading'
  import { getObjValue, setObjValue, formatToMoney, strToArr, selectDictLabel } from '/@/utils/common.js'
  import dayjs from 'dayjs'
  import { cloneDeep, isEmpty } from 'lodash-es'
  import {
    COMPLAINT_STATUS, //投诉状态
  } from '/@/constants/dict'

  import { useUserStore } from '/@/store/modules/system/user'
  const USER_TYPE = useUserStore().userType // 用户类型: 1-平台;2-代理;4-商户

  const { proxy } = getCurrentInstance()
  // ------------------------ 事件 ------------------------

  const apiSource = {
    detail: (data) => {
      if (USER_TYPE == '4') return wechatDetail(data)
    },
  }

  const props = defineProps({
    open: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => {},
    },
  })

  const getContainer = () => {
    return document.getElementById('smartAdminLayoutContent')
  }
  const detailConfig = ref([
    {
      label: '通道类型',
      dataIndex: 'complaintNo',
    },
    {
      label: '公司名称',
      dataIndex: 'merchantName',
    },
    {
      label: '所属代理',
      dataIndex: 'storeName',
    },
    {
      label: '商户名称',
      dataIndex: 'amount',
    },
    {
      label: '商户号',
      dataIndex: 'applyRefundAmount',
    },
    {
      label: '交易订单号',
      dataIndex: 'complaintTime',
      customRender: (data) => dayjs(data.complaintTime).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      label: '支付订单号',
      dataIndex: 'doTime',
      customRender: (data) => dayjs(data.doTime).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      label: '渠道订单号',
      dataIndex: 'complaintFullRefunded',
      customRender: (data) => (data.complaintFullRefunded ? '是' : '否'),
    },
    {
      label: '退款订单号',
      dataIndex: 'incomingUserResponse',
      customRender: (data) => (data.incomingUserResponse ? '是' : '否'),
    },
    {
      label: '资金流水号',
      dataIndex: 'userComplaintTimes',
    },
    {
      label: '门店名称',
      dataIndex: 'inPlatformService',
      customRender: (data) => (data.inPlatformService ? '是' : '否'),
    },
    {
      label: '订单金额',
      dataIndex: 'needImmediateService',
      customRender: (data) => formatToMoney(data.applyRefundAmount / 100),
    },
    {
      label: '退款金额',
      dataIndex: 'channelTypes',
      customRender: (data) => formatToMoney(data.applyRefundAmount / 100),
    },
    {
      label: '手续费退还金额',
      dataIndex: 'source',
      customRender: (data) => formatToMoney(data.applyRefundAmount / 100),
    },
    {
      label: '交易状态',
      dataIndex: 'complaintState',
      customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.complaintState),
    },
    {
      label: '退款状态',
      dataIndex: 'complaintState',
      customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.complaintState),
    },
    {
      label: '退款原因',
      dataIndex: 'complaintState',
      customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.complaintState),
    },
    {
      label: '退款失败原因',
      dataIndex: 'complaintState',
      customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.complaintState),
    },
    {
      label: '退款时间',
      dataIndex: 'doTime',
      customRender: (data) => dayjs(data.doTime).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      label: '交易时间',
      dataIndex: 'doTime',
      customRender: (data) => dayjs(data.doTime).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      label: '交易类型',
      dataIndex: 'complaintState',
      customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.complaintState),
    },
    {
      label: '支付方式',
      dataIndex: 'complaintState',
      customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.complaintState),
    },
  ])

  const tableData = ref([])
  const columns = ref([
    {
      title: '分账接收方',
      dataIndex: 'no',
      ellipsis: true,
    },
    {
      title: '分账比例',
      dataIndex: 'companyName',
      ellipsis: true,
    },
    {
      title: '分账金额',
      dataIndex: 'exhibitionName',
      ellipsis: true,
    },
    {
      title: '退款金额',
      dataIndex: 'oAgentName',
      ellipsis: true,
    },
    {
      title: '实际分账金额',
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: '分账关系类型',
      dataIndex: 'phone',
      ellipsis: true,
    },
  ])

  const emit = defineEmits(['update:open', 'ok'])
  const openForm = computed({ get: () => props.open, set: (val) => emit('update:open', val) })

  // ------------------------ 显示与隐藏 ------------------------
  // 获取表单信息
  async function getFormInfo(data) {
    SmartLoading.show()
    try {
      let res = await apiSource.detail({ complaintNo: data.complaintNo })
      if (res.code === 200) {
        replyForm.value = res.data
      }
    } catch (error) {
      console.error(error)
    }
    SmartLoading.hide()
  }
  // 是否显示
  function show(rowData) {
    getFormInfo(rowData)
  }

  // 回复用户弹窗相关
  const infoForm = {
    complaintId: undefined, //投诉单id
    isRefund: undefined, //是否退款

    merchantId: null, //商户id
    channelId: null, //通道id
    replyContent: '', //回复内容
    responseImages: [], //回复图片列表

    // 拒绝表单
    action: 'REJECT', //拒绝
    rejectReason: undefined, //拒绝理由
    rejectMediaList: [], //拒绝图片列表
  }
  const replyForm = ref(cloneDeep(infoForm))

  function onReplyModalClose() {
    replyForm.value = cloneDeep(infoForm)
    openForm.value = false
  }

  // 刷新
  const resh = ref(false)
  function refresh() {
    resh.value = !resh.value
  }
  defineExpose({
    show,
  })
  watch(
    [() => props.rowData, () => props.open, () => resh.value],
    (val) => {
      if (props.open && props.rowData) {
        show(val[0])
      }
    },
    { immediate: true },
  )
</script>
